<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .plus {
        width: 20px;
        height: 20px;
        position: absolute;
        border-radius: 50%;
        left: var(--left);
        top: var(--top);
        /* 动画的时候看不到小球,应该时icon小球加载的问题,可以把时间放慢,或者换一种加载小球的方法 */
        animation: moveY 5s cubic-bezier(0.5, -0.5, 1, 1);
      }
      .plus svg {
        animation: moveX 5s linear;
      }
      .car {
        position: fixed;
        bottom: 0;
        left: 0;
      }
      .btn {
        position: absolute;
        width: 90px;
        top: 50%;
        right: 0;
      }
      @keyframes moveY {
        to {
          transform: translateY(var(--y));
        }
      }
      @keyframes moveX {
        to {
          transform: translateX(var(--x));
        }
      }
    </style>
  </head>
  <body>
    <!-- <div class="plus" style="--left:300px;--top:300px;--y:600px;--x:-200px">
      <svg
        t="1686576662147"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="3601"
        width="20"
        height="20"
      >
        <path
          d="M514.048 62.464q93.184 0 175.616 35.328t143.872 96.768 96.768 143.872 35.328 175.616q0 94.208-35.328 176.128t-96.768 143.36-143.872 96.768-175.616 35.328q-94.208 0-176.64-35.328t-143.872-96.768-96.768-143.36-35.328-176.128q0-93.184 35.328-175.616t96.768-143.872 143.872-96.768 176.64-35.328zM772.096 576.512q26.624 0 45.056-18.944t18.432-45.568-18.432-45.056-45.056-18.432l-192.512 0 0-192.512q0-26.624-18.944-45.568t-45.568-18.944-45.056 18.944-18.432 45.568l0 192.512-192.512 0q-26.624 0-45.056 18.432t-18.432 45.056 18.432 45.568 45.056 18.944l192.512 0 0 191.488q0 26.624 18.432 45.568t45.056 18.944 45.568-18.944 18.944-45.568l0-191.488 192.512 0z"
          p-id="3602"
        ></path>
      </svg>
    </div> -->
    <div class="btn" style="background-color: lightblue; cursor: pointer">
      Click Me！
    </div>
    <div class="car">
      <svg
        t="1686576616735"
        class="icon"
        viewBox="0 0 1028 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2628"
        width="20"
        height="20"
      >
        <path
          d="M332.8 790.528q19.456 0 36.864 7.168t30.208 19.968 20.48 30.208 7.68 36.864-7.68 36.864-20.48 30.208-30.208 20.48-36.864 7.68q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-36.864 7.68-36.864 20.48-30.208 30.208-19.968 37.888-7.168zM758.784 792.576q19.456 0 37.376 7.168t30.72 19.968 20.48 30.208 7.68 36.864-7.68 36.864-20.48 30.208-30.72 20.48-37.376 7.68-36.864-7.68-30.208-20.48-20.48-30.208-7.68-36.864 7.68-36.864 20.48-30.208 30.208-19.968 36.864-7.168zM930.816 210.944q28.672 0 44.544 7.68t22.528 18.944 6.144 24.064-3.584 22.016-13.312 37.888-22.016 62.976-23.552 68.096-18.944 53.248q-13.312 40.96-33.28 56.832t-49.664 15.872l-35.84 0-65.536 0-86.016 0-96.256 0-253.952 0 14.336 92.16 517.12 0q49.152 0 49.152 41.984 0 20.48-9.728 35.84t-38.4 14.336l-49.152 0-94.208 0-118.784 0-119.808 0-99.328 0-55.296 0q-20.48 0-34.304-9.216t-23.04-24.064-14.848-32.256-8.704-32.768q-1.024-6.144-5.632-29.696t-11.264-58.88-14.848-78.848-16.384-87.552q-19.456-103.424-44.032-230.4l-76.8 0q-15.36 0-25.6-7.68t-16.896-18.432-9.216-23.04-2.56-22.528q0-20.48 13.824-33.792t37.376-12.288l103.424 0q20.48 0 32.768 6.144t19.456 15.36 10.24 18.944 5.12 16.896q2.048 8.192 4.096 23.04t4.096 30.208q3.072 18.432 6.144 38.912l700.416 0zM892.928 302.08l-641.024-2.048 35.84 185.344 535.552 1.024z"
          p-id="2629"
        ></path>
      </svg>
    </div>
    <script>
      const car = document.querySelector(".car");
      const btn = document.querySelector(".btn");
      btn.addEventListener("click", () => {
        const plus = document.createElement("div");
        plus.className = "plus";
        plus.innerHTML = `<svg
        t="1686576662147"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="3601"
        width="20"
        height="20"
      >
        <path
          d="M514.048 62.464q93.184 0 175.616 35.328t143.872 96.768 96.768 143.872 35.328 175.616q0 94.208-35.328 176.128t-96.768 143.36-143.872 96.768-175.616 35.328q-94.208 0-176.64-35.328t-143.872-96.768-96.768-143.36-35.328-176.128q0-93.184 35.328-175.616t96.768-143.872 143.872-96.768 176.64-35.328zM772.096 576.512q26.624 0 45.056-18.944t18.432-45.568-18.432-45.056-45.056-18.432l-192.512 0 0-192.512q0-26.624-18.944-45.568t-45.568-18.944-45.056 18.944-18.432 45.568l0 192.512-192.512 0q-26.624 0-45.056 18.432t-18.432 45.056 18.432 45.568 45.056 18.944l192.512 0 0 191.488q0 26.624 18.432 45.568t45.056 18.944 45.568-18.944 18.944-45.568l0-191.488 192.512 0z"
          p-id="3602"
        ></path>
      </svg>`;

        const btnRect = btn.getBoundingClientRect();
        // left+按钮宽度的一半-小球宽度的一半
        const left = btnRect.left + btnRect.width / 2 - 20 / 2;
        const top = btnRect.top-20

        plus.style.setProperty('--left',`${left}px`)
        plus.style.setProperty('--top',`${top}px`)

        const carRect = car.getBoundingClientRect()
        const x = carRect.left + carRect.width/2 - 20/2-left
        const y = carRect.top - 20 - top

        plus.style.setProperty('--x',`${x}px`)
        plus.style.setProperty('--y',`${y}px`)

        plus.addEventListener('animationend',()=>{
          plus.remove()
          // 这个方法会报错,但是能移除成功,是因为有两个动画,所以会触发两次,第二次会报错
          // console.log(document.body)
          // document.body.removeChild(plus)
        })

        document.body.appendChild(plus);
      });
    </script>
  </body>
</html>
